<template>
  <div id="zonghe-biye">
    <div class="all-tab">
      <div
        v-for="(item, index) in labels"
        :key="index"
        :class="{active: active === index}"
        @click="handleNavItemClick(index,item)"
      >
        {{ item.bookName }}
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      labels: [
        {
          id: 1,
          bookName: "毕业目标设定",
          bookId: null,
          isActive: "1",
          url: "/zonghe/zonghebiye",
          name: "biye1",
        },
        {
          id: 3,
          bookName: "毕业要求设定",
          bookId: null,
          isActive: "0",
          url: "/zonghe/zonghebiye/biye2",
          name: "biye2",
        },
        {
          id: 4,
          bookName: "毕业目标-毕业要求矩阵",
          bookId: null,
          isActive: "0",
          url: "/zonghe/zonghebiye/biye3",
          name: "biye3",
        },
        {
          id: 5,
          bookName: "毕业要求-课程体系矩阵",
          bookId: null,
          isActive: "0",
          url: "/zonghe/zonghebiye/biye4",
          name: "biye4",
        },
      ],
      active: 0,
    };
  },
  created() {
    this.initActive();
  },
  methods: {
    initActive() {
      const index = this.labels.findIndex(
        (item) => item.name === this.$route.name
      );
      this.active = index;
    },
    handleNavItemClick(index, row) {
      this.active = index;
      console.log(row, 22222);
      this.$router.push(row.url);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>